<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>生意帮</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <style>
        html,
        body {
            background-color: #fff;
        }

        .h10 {
            width: 100%;
            height: 0.5rem;
            display: -webkit-box;
            clear: both;
            background: #f5f5f5
        }

        .aui-bar-nav {
            border-bottom: none;
        }

        .aui-bar-nav .aui-iconfont {
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 50%;
            width: 1.75rem;
            line-height: 1.75rem;
            transition: all 0.5s;
            color: #fff;
        }

        #header_top {
            position: fixed;
            width: 100vw;
            left: 0;
            top: 0;
            background-color: transparent;
            border-bottom: 1px solid transparent;
            transition: all 0.5s;
        }

        #header_top>div {
            padding: 0.25rem 0;
            overflow: hidden;
        }

        #swiper_banner .swiper-slide {
            height: 15rem;
        }

        .pagination_banner,
        .pagination_banner span {
            color: #fff;
        }

        .pagination_banner {
            width: auto;
            padding: 0 0.5rem;
            height: 1.2rem;
            border-radius: 0.6rem;
            left: auto;
            right: 0.5rem;
            background-color: rgba(0, 0, 0, 0.7);
        }

        .cp_content {
            padding: 0.75rem 0.5rem;
            background-color: #fff;
        }

        .cp_content1 {
            padding: 0.75rem 0;
            background-color: #fff;
        }

        .cp_name {
            color: #333;
            font-size: 0.9rem;
        }

        .price {
            font-size: 1rem;
            color: #f23030;
        }

        .title {
            text-align: center;
        }

        .cp_record>div {
            font-size: 0.6rem;
            color: #999;
        }

        .content_borbot {
            border-bottom: 10px solid #f5f5f5;
        }

        .content_ul {
            background-color: #fff;
            padding-left: 0.5rem;
        }

        .content_ul li {
            border-bottom: 1px solid #e6e6e6;
            color: #999;
            font-size: 0.7rem;
            line-height: 2.5rem;
        }

        .content_ul li span {
            color: #333;
            margin-left: 1rem;
        }

        .content_ul li:nth-last-of-type(1) {
            border-bottom: none;
        }

        .content_head {
            overflow: hidden;
            padding: 0 0.5rem 0.5rem;
            border-bottom: 1px solid #e6e6e6
        }

        .content_head .title-1 {
            font-size: 0.9rem;
            font-weight: 600;
            width: 50%;
            float: left;
        }

        .content_head .more-right {
            width: 50%;
            float: right;
            text-align: right;
            font-size: 0.7rem;
            margin-top: 0.2rem;
            color: #f23030;
        }

        .more-right span{
          border: 1px solid #f23030;
          padding: 0.2rem 0.2rem 0.05rem 0.2rem;
          border-radius: 1rem;
          color: #f23030;
        }

        .more-right img {
            display: inline-block;
            margin-left: 5px;
            height: 0.7rem;
        }

        .pro2_swiper {
            width: 100%;
            height: auto;
            margin: auto;
            position: relative;
            overflow: auto;
        }

        .pro2_swiper .swiper-slide {
            position: relative;
            font-size: 0.7rem;
            overflow: auto;
        }

        .pro2_swiper .swiper-slide .img {
            width: 100%;
            height: 60%;
            overflow: hidden position: relative;
            background: #f5f5f5;
            text-align: center;
            border: 1px solid #e6e6e6;
        }

        .pro2_swiper .swiper-slide .img:after {
            position: absolute;
            content: '赠品';
            width: 2rem;
            height: 1rem;
            line-height: 1rem;
            background-color: #f23030;
            color: #fff;
            text-align: center;
            font-size: 0.7rem;
            left: 0;
            top: 0;
            border-bottom-right-radius: 0.15rem;
        }

        .pro2_swiper .swiper-slide .img img {
            width: 100%;
            padding: 0.2rem;
        }

        .cp_content1 ul {
            padding: 0 0.5rem;
        }

        .cp_content1 ul li {
            border-bottom: 1px solid #e6e6e6;
            padding: 0.5rem 0;
        }

        .cp_content1 .aui-list-item .aui-list-item-inner,
        .sb div .aui-list-item-inner {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-box-align: start;
            -webkit-align-items: flex-start;
            align-items: flex-start;
        }

        .sb div .aui-list-item-inner {
            width: 65%;
        }

        .sb div .aui-list-item-inner .sb_headTxt {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .cp_content1 .aui-list-item-text {
            font-size: 0.6rem;
            color: #999;
        }

        .comment_txt {
            color: #333;
            font-size: 0.7rem;
            padding-top: 0.1rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sb_headTxt {
            font-size: 0.8rem;
            color: #333;
        }

        .sb_botTxt {
            font-size: 0.6rem;
            color: #666;
        }

        .sb>div {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .sb .aui-pull-right span {
            display: inline-block;
            height: 1.5rem;
            line-height: 1.5rem;
            width: 4rem;
            background-color: #f23030;
            color: #fff;
            font-size: 0.7rem;
            text-align: center;
            border-radius: 1rem;
        }

        .content_xq {
            background-color: #fff;
            margin-bottom: 2.8rem;
        }

        .content_xqTitle {
            text-align: center;
            padding: 0.75rem 0;
            font-size: 0;
            border-bottom: 1px solid #e6e6e6;
        }

        .content_xqTitle img {
            display: inline-block;
            width: 5rem;
        }

        .content_xqcont {
            padding-top: 0.75rem;
        }

        .cp_footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100vw;
            padding: 0.5rem;
            background-color: #fff;
            box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1);
            font-size: 0;
            z-index: 9
        }

        .cp_footerL {
            width: 45%;
            display: inline-block;
        }

        .cp_footerL>div {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-around;
            justify-content: space-around;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .cp_footerL>div {
            font-size: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
        }

        .cp_footerL>div img {
            width: 1rem;
            margin: 0 auto 0.2rem;
        }

        .cp_footerR {
            width: 55%;
            display: inline-block;
            vertical-align: top;
            height: 1.8rem;
            line-height: 1.8rem;
        }

        .cp_footerR>div {
            display: inline-block;
            font-size: 0.7rem;
            text-align: center;
            color: #fff;
        }

        .cp_footerR_left {
            width: 50%;
            height: 100%;
            background-color: #ff8000;
            border-top-left-radius: 0.9rem;
            border-bottom-left-radius: 0.9rem;
        }

        .cp_footerR_right {
            width: 50%;
            height: 100%;
            background-color: #f23030;
            border-top-right-radius: 0.9rem;
            border-bottom-right-radius: 0.9rem;
        }

        #swiper_banner .swiper-pagination {
            background: rgba(0, 0, 0, 0.6);
            display: inline-block;
            color: #fff;
            width: 2.4rem;
            font-size: 0.6rem;
            border-radius: 1rem;
            right: 0.75rem;
            left: inherit;
        }

        #swiper_banner .swiper-pagination-current {
            font-size: 0.8rem;
            color: #fff;
        }

        #swiper_banner .swiper-pagination-total {
            color: #fff;
        }

        #header_top {
            background: transparent;
            border-bottom: 1px solid transparent;
        }

        #header_top .aui-iconfont {
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
        }

        #header_top #title {
            opacity: 0
        }

        #header_top.active {
            background: #fff;
            border-bottom: 1px solid #e6e6e6;
        }

        #header_top.active .aui-iconfont {
            background: transparent;
            color: #333;
        }

        #header_top.active #title {
            opacity: 1
        }

        .exchangeList_img {
            background: url(../../image/cpimg.jpg) center center/cover no-repeat;
            background-size: 100% 100%;
        }

        .exchangeList_right {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            padding: 0.5rem 0.5rem 0;
        }

        .aui-list .aui-list-item-media {
            width: 5rem;
            height: 4rem;
            padding-right: 1rem;
        }

        .aui-list .aui-list-item-media {
            padding-top: 0;
            padding-bottom: 0;
        }

        .exchangeList_right_txt {
            position: relative;
            width: 100%;
        }

        .exchangeList_right_bottom {
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
            line-height: 0.6rem;
        }

        .exchangeList_right_bottom1 {
            float: left;
            font-size: 0.7rem;
            color: #f23030;
        }

        .exchangeList_right_bottom2 {
            float: right;
        }

        .aui-list .aui-list-item-title {
            font-size: 0.7rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        iframe {
            border: none;
            outline: none;
        }

        .cp_footer0 {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100vw;
            padding: 0.5rem;
            background-color: #fff;
            box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1);
            font-size: 0;
            z-index: 9;
            background: #f23030;
        }

        .exchangeSel {
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            font-size: 0.7rem;
            text-align: center;
            color: #fff;
        }

        .product_title {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 20px;
            height: 20px;
            margin-top: 0.3rem;
            /*margin-bottom: 0.3rem;*/
        }

        .product_dh {
            /*margin-left: 0.5rem;*/
        }

        .evalMark {
            display: inline-block;
            color: #f23030;
            margin-left: 0.2rem;

        }
      .aui-dot{
        background: #000
      }


      /*购物车*/
      .gwc_btn{
        background: rgba(255, 255, 255, 0.5);
        width: 2rem;
        height: 2rem;
        border: 1px solid red;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: .75rem;
        bottom: 3rem;
      }
      .gwc_btn img{
        width: 50%;
        height: 50%;
      }
    </style>
</head>

<body>
    <div id="app" v-cloak>


        <header id="header_top" class="aui-bar aui-bar-nav">
            <div>
                <a class="aui-pull-left" onclick="goback()">
                    <span class="aui-iconfont aui-icon-left"></span>
                </a>
                <div class="aui-title" id="title">
                    {{info.goods_name}}
                </div>
                <a class="aui-pull-right" onclick="openMore()">
                    <span class="aui-iconfont aui-icon-more"></span>
                </a>
            </div>
        </header>
        <div class="aui-refresh-content">
            <div id="swiper_banner" class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-if="info.tv_url!='' && info!=''"><video :src=info.tv_url width="100%" height="100%" Controls preload="metadata" :poster=info.tv_pic.pic></video></div>
                    <div class="swiper-slide" v-for="item in info.banner" :style="'background:url('+item.pic+') center center/cover no-repeat;'"></div>
                </div>
                <div class="swiper-pagination pagination_banner"></div>
            </div>

            <div id="headCon" class="cp_content content_borbot">
                <div class="cp_name">
                    {{info.goods_name}}
                    <!-- <div class="aui-pull-right" style="width:1rem;height:1rem" @click="gwHref"><img src="../../image/footer/gwc_on.png" alt=""></div> -->
                    <div class="aui-pull-right" style="width:1rem;height:1rem" onclick="openMore()"><img src="../../image/four/fx_on.png" alt=""></div>
                </div>
                <div class="price">
                    ￥{{info.price}}
                </div>
                <div class="cp_record clearfix">
                    <!-- <div class="aui-pull-left">快递:0.00</div> -->
                    <div class="aui-pull-right">{{info.store_province}} {{info.store_city}} {{info.store_district}}</div>
                    <div class="aui-pull-left">月销{{info.sales}}件</div>
                </div>
            </div>
            <div class="content_borbot">
                <ul class="content_ul">
                    <li>
                        服务<span>七天无理由退换货</span>
                    </li>
                    <!-- <li>
                      配送<span>顺丰快递 免邮</span>
                  </li> -->
                </ul>
            </div>
            <div class="cp_content1 content_borbot" v-if="info.exchange_goods && info.exchange_goods.length > 0">
                <div class="content_head" @click="exchangeMore(flag1)">
                    <div class="title-1">
                        赠品区
                    </div>
                    <div class="more-right" ><span>查看更多</span><img src="../../image/more_red.png" alt=""></div>
                    <!-- <div class="more-right" v-else>修改赠品<img src="../../image/more_red.png" alt=""></div> -->
                </div>

                <div class="swiper-container pro2_swiper" style="padding:0.75rem 0 0rem 0;clear:both" v-if="flag1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide product_dh" @click="exchangeProduct(val.goods_name, val.goods_id)" v-for="val in dhList">
                            <div class="img" :style="'background: url('+val.logo_pic+') no-repeat center/cover;height: 5rem;'">
                            </div>
                            <div class="product_title">{{val.goods_name}}</div>
                            <div style="color:#f23030">{{val.price}}兑换币</div>
                        </div>


                    </div>
                </div>
                <div v-else>
                    <div class="aui-list" v-for="val in manyList">
                        <div class="exchangeList_right">
                            <div class="aui-list-item-media">
                                <div :style="'background: url('+val.logo_pic+') no-repeat center/cover;width:100%;height:100%;'" class="exchangeList_img"></div>
                            </div>
                            <div class="exchangeList_right_txt">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">{{val.goods_name}}</div>
                                </div>
                                <div class="aui-list-item-text">规格：{{val.size}}</div>
                                <div class="exchangeList_right_bottom clearfix">
                                    <div class="exchangeList_right_bottom1">赠品</div>
                                    <div class="exchangeList_right_bottom2">x{{val.num}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cp_content1 content_borbot">
                <div class="content_head">
                    <div class="title-1">
                        商品评价({{info.commentCount}})
                    </div>
                    <div v-if="info.commentCount!= 0 " class="more-right" @click="openDetail2('comment', '评论详情',info.goods_id)"><span>查看更多</span><img src="../../image/more_red.png" alt=""></div>

                </div>
                <ul v-if="info.commentCount!=0">
                    <li class="aui-list-item aui-list-item-middle">
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media" style="width: 2rem;margin-right:0.5rem;overflow:hidden;border-radius:2px;">
                                <img :src=infoImg.headimg width="100%" class="aui-list-img-sm">
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title aui-font-size-14">{{infoImg.nickname}}</div>
                                </div>
                                <div class="aui-list-item-text">{{infoImg.posttime}}</div>
                            </div>
                        </div>
                        <div class="comment_txt">
                            {{infoImg.content}}
                        </div>
                        <div class="comment_txt">
                            <img :src=item style="width:2.5rem;height:2.5rem;display:inline-block" alt="" v-for="item in infoImg.pic">
                        </div>

                        <div style="color:#999;background:#e6e6e6;font-size:0.7rem;border-radius:0.2rem;padding:0.2rem;" v-if="infoImg.reply_content!=''">
                            [商家回复] <span style="font-size:0.6rem">{{infoImg.reply_content}}</span>
                        </div>
                    </li>
                </ul>
                <ul v-if="info.commentCount!=0 && infoImg.append_status==1">
                    <li class="aui-list-item aui-list-item-middle">
                        <div class="aui-media-list-item-inner" style="font-size:0.7rem;color:#f23030">
                            追加评价
                        </div>
                        <div class="comment_txt">
                            {{infoImg.append_content}}
                        </div>
                        <div class="comment_txt">
                            <img :src=val style="width:2.5rem;height:2.5rem;display:inline-block" alt="" v-for="val in infoImg.append_pic">
                        </div>

                        <div style="color:#999;background:#e6e6e6;font-size:0.7rem;border-radius:0.2rem;padding:0.2rem;" v-if="infoImg.append_reply_content !=''">
                            [商家回复] <span style="font-size:0.6rem">{{infoImg.append_reply_content}}</span>
                        </div>
                    </li>
                </ul>
                <h3 style="text-align: center;line-height: 2;" v-if="info.commentCount==0">暂无评论</h3>
                <!-- <h3 style="text-align: center;line-height: 2;"  v-if="info.comment.length=0">暂无评论</h3> -->
            </div>

            <div class="cp_content content_borbot sb">


                <div v-if="xd_info.shop_id==0">
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media" style="width: 3rem;margin-right:0.5rem;">
                            <img src="../../image/sb_logo.jpg" width="100%" class="aui-list-img-sm">
                        </div>
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-14 sb_headTxt">{{info.store_name}}</div>
                            </div>
                            <div class="aui-list-item-text sb_botTxt">共{{info.store_count}}件商品</div>
                        </div>
                    </div>

                    <div class="aui-pull-right">
                        <span @click="openShop(info.store_name, info.store_id)">进店逛逛</span>
                    </div>
                </div>


                <div v-else>
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media" style="width: 3rem;margin-right:0.5rem;">
                            <img :src="xd_info.head_img" width="100%" class="aui-list-img-sm">
                        </div>
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-14 sb_headTxt">{{xd_info.username}}的小店</div>
                            </div>
                            <div class="aui-list-item-text sb_botTxt">共{{xd_info.count}}件商品</div>
                        </div>
                    </div>

                    <div class="aui-pull-right">
                        <span @click="openOtherXd(xd_info.username,xd_info.shop_id)">进入小店</span>
                    </div>
                </div>
                <div style="margin-top:0.5rem">
                    <p>宝贝描述 <span class="evalMark">{{info.fraction}}</span><span class="evalMark" v-if="info.fraction>3">高</span><span class="evalMark" v-if="info.fraction==3">中</span><span class="evalMark" v-if="info.fraction<3">低</span></p>
                    <p>卖家服务 <span class="evalMark">{{info.service_fraction}}</span><span class="evalMark" v-if="info.service_fraction>3">高</span><span class="evalMark" v-if="info.service_fraction==3">中</span><span class="evalMark" v-if="info.service_fraction<3">低</span></p>
                    <p>物流服务 <span class="evalMark">{{info.logistics_fraction}}</span><span class="evalMark" v-if="info.logistics_fraction>3">高</span><span class="evalMark" v-if="info.logistics_fraction==3">中</span><span class="evalMark" v-if="info.logistics_fraction<3">低</span></p>
                </div>
            </div>

              <ul class="aui-list aui-list-in" style="padding:0.6rem 0" v-for="item in info.label"  v-if="info.label!=''">
                <li style="padding:0rem 0.7rem;">
                  <h4 style="color:#f23030">{{item.name}}</h4>
                </li>
                <li class="aui-list-item"  style="margin-right:0.4rem;background-image:none" v-for="content in item.title">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-dot"></i>
                    </div>
                    <div class="aui-list-item-inner" style="padding-right:0rem;font-size:0.7rem;color:#666;align-items:baseline" >
                        {{content}}
                    </div>
                </li>
              </ul>
            <div class="content_xq content_borbot">
                <div class="content_xqTitle">
                    <img src="../../image/cpxq.png" alt="">
                </div>
                <div class="content_xqcont">
                    <iframe :src="info.detail" style="width: 100%" id="cnt_iframe" iframeborder="0"></iframe>
                </div>
            </div>



        </div>
        <div class="cp_footer">
            <div class="cp_footerL">
                <div>
                    <div @click="openShop(info.store_name, info.store_id)">
                        <img src="../../image/cp_footer1.png" alt=""> 店铺
                    </div>
                    <div @click="open_chat_win('single')">
                        <img src="../../image/cp_footer2.png" alt=""> 客服
                    </div>
                    <div @click="goCollect(info.goods_id)">
                        <img src="../../image/cp_footer3_F.png" alt="" v-if="info.collect_status==0">
                        <img src="../../image/cp_footer3_N.png" alt="" v-if="info.collect_status==1"> 收藏
                    </div>
                </div>

            </div>

            <div class="cp_footerR">
                <div class="cp_footerR_left" v-if="area_type == 1" @click="buyNow(1,id)">加入购物车</div>
                <div class="cp_footerR_left" v-else @click="joinShop(id)"><span style="color: #fff" v-if="info.shop_status == 0">加入小店</span><span style="color: #fff" v-else>已加入小店</span></div>
                <div class="cp_footerR_right" @click="buyNow(2,id)">立即购买</div>
            </div>
        </div>
        <!-- <div class="cp_footer0" v-else>
          <div class="exchangeSel" v-if="info.shop_status == 0" @click="joinShop(id)">加入小店</div>
          <div class="exchangeSel" v-else>已加入小店</div>
        </div> -->

        <div class="gwc_btn" @click="gwHref()"><img src="../../image/footer/gwc_on.png" alt=""></div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<!-- <script type="text/javascript" src="../../script/zepto.js"></script> -->
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/aui-slide.js"></script>
<script type="text/javascript" src="../../script/aui-lazyload.js"></script>
<script type="text/javascript">
    function goback() {
        api.closeWin();
    }

    function openMore() {
        api.openFrame({
            name: 'share',
            url: './share.html',
            pageParam: {
                goodsid: api.pageParam.id
            }
        })
    }


    apiready = function() {
        // $('#title').text(api.pageParam.name);
        $(window).scroll(function() {
            if ($(window).scrollTop() > ($('#headCon').offset().top - $('#header_top').height())) {
                $('#header_top').addClass('active')
            } else {
                $('#header_top').removeClass('active')
            }
        })

        var app = new Vue({
            el: '#app',
            data: {
                info: [],
                infoImg: '',
                id: api.pageParam.id,
                data: {
                    goodsid: '',
                    skuid: '',
                },
                commodity_exchange_id: '',
                commodity_exchange_skuid: '',
                exchanges: {},
                flag1: true,
                exchangeGoods: {
                    logo_pic: '',
                    goods_name: '',
                    num: 1,
                    size: '',
                },
                collectType: '',
                area_type: 0,
                dp_name: "",
                kf_id: 0,
                kf_img: "",
                dhList: [],
                xd_info: {},
                manyList:[],
                manyId:[]
            },
            created: function() {
                var $_this = this;

                // if (!$api.getStorage('token')) {
                //   api.confirm( {
                //       title: '未登录',
                //       msg: '是否去登录？',
                //       buttons: [ '登录', '返回' ]
                //     }, function ( ret, err ) {
                //       var index = ret.buttonIndex;
                //       if ( index == 1 ) {
                //         api.openWin({
                //             name: 'login',
                //             url: '../five_frame/headerone.html',
                //             pageParam: {
                //                 msg: '',
                //                 url: '../five_frame/login.html'
                //             }
                //         });
                //         api.closeWin({
                //           animation: {
                //               type:"none",
                //               duration: 0,
                //           }
                //         })
                //       } else {
                //         goback()
                //       }
                //     })
                //     return
                // }

                api.showProgress({
                    title: '努力加载中...',
                    text: '先喝杯茶...',
                    modal: false
                });

                api.ajax({
                    url: window.Url.Freegoods_getGoodsDetail,
                    method: 'post',
                    data: {
                        values: {
                            goodsId: api.pageParam.id,
                            longitude: $api.getStorage('longitude'),
                            latitude: $api.getStorage('latitude'),
                            token: $api.getStorage('token'),
                            shop_id: api.pageParam.userId || ""
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                         console.log(JSON.stringify(ret))
                        if (ret.re == 1) {
                            $_this.info = ret.data
                            $_this.infoImg = ret.data.comment
                            // $_this.getDh(ret.data.goods_id)
                            $_this.area_type = ret.data.area_type
                            $_this.dp_name = ret.data.store_name;
                            $_this.kf_id = ret.data.store_kefuid;
                            $_this.kf_img = ret.data.store_logo;
                            $_this.xd_info = ret.data.shop;
                            $_this.dhList = ret.data.exchange_goods
                            console.log(ret.data.shop.shop_id)
                            if(ret.data.shop.shop_id!=0){
                              $api.setStorage('shop_id', ret.data.shop.shop_id);

                            }
                            //  console.log("获取到的商品详情啊-------"+JSON.stringify(ret))
                            // console.log($_this.kf_id)
                            $_this.$nextTick(function() {
                                var bannerSwiper = new Swiper('#swiper_banner', {
                                    autoplay: 3000,
                                    loop: true,
                                    pagination: '.pagination_banner',
                                    paginationType: 'fraction',
                                })
                                var swiper = new Swiper('.pro2_swiper', {
                                                slidesPerView: 3,
                                                spaceBetween: 10,
                                                freeMode: true,
                                                observer: true,
                                                observeParents: true
                                            })


                                setIframeHeight()
                            })
                        }
                    } else {
                        api.alert({
                            msg: JSON.stringify(err)
                        });
                    }
                })
            },
            methods: {
                openDetail2: function(type, name, id) {
                    api.openWin({
                        name: type,
                        url: './one_frame_header2.html',
                        pageParam: {
                            type: type,
                            name: name,
                            data: id
                        }
                    })
                },
                gwHref: function() {
                    api.openWin({
                        name: 'carlistHead',
                        url: '../five_frame/headerone.html',
                        pageParam: {
                            msg: '购物车',
                            url: '../three_frame/carlist.html',
                            type: 'carlist'
                        }
                    });

                },
                //获取兑换赠品
                // getDh: function(id) {
                //     var _this = this;
                //     api.ajax({
                //         url: window.Url.Freegoods_getExchange,
                //         method: 'post',
                //         data: {
                //             values: {
                //                 token: $api.getStorage('token'),
                //                 goodsId: id,
                //                 province: $api.getStorage('province'),
                //                 city: $api.getStorage('city')
                //             },
                //
                //         }
                //     }, function(ret, err) {
                //         if (ret) {
                //             //console.log( JSON.stringify( ret.data ) );
                //             _this.dhList = ret.data
                //             var swiper = new Swiper('.pro2_swiper', {
                //                 slidesPerView: 3,
                //                 spaceBetween: 10,
                //                 freeMode: true,
                //                 observer: true,
                //                 observeParents: true
                //             })
                //         } else {
                //             console.log(JSON.stringify(err))
                //         }
                //     });
                //
                // },
                openShop: function(name, id) {
                    api.openWin({
                        name: 'shop_inner',
                        url: '../two_frame/two_frame_header.html',
                        pageParam: {
                            type: 'shop_inner',
                            name: name,
                            id: id
                        }
                    })
                },
                // 进入小店
                openOtherXd: function(other_name, userId) {
                    api.openWin({
                        name: 'otherXd_header',
                        url: '../five_frame/otherXd_header.html',
                        pageParam: {
                            other_name: other_name,
                            userId: userId
                        }
                    });

                },
                goCollect: function(id) {
                    var $_this = this;
                    all_open_login(function() {
                        if ($_this.info.collect_status == 0) {
                            $_this.collectType = 1;
                        } else {
                            $_this.collectType = 2;
                        }
                        api.ajax({
                            url: window.Url.Freegoods_collectGoods,
                            method: 'post',
                            data: {
                                values: {
                                    token: $api.getStorage('token'),
                                    goodsId: id,
                                    type: $_this.collectType,
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                                api.toast({
                                    msg: ret.info,
                                    duration: 2000,
                                    location: 'middle'
                                });
                                if ($_this.info.collect_status == 0) {
                                    $_this.info.collect_status = 1;
                                } else {
                                    $_this.info.collect_status = 0;
                                }

                                $_this.$nextTick(function() {

                                })
                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })
                    })
                },
                buyNow: function(type, id) {
                    var $_this = this;
                    all_open_login(function() {
                        api.ajax({
                            url: window.Url.Freegoods_getGoodsSku,
                            method: 'post',
                            data: {
                                values: {
                                    goodsId: id,
                                    token: $api.getStorage('token')
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                                //alert(JSON.stringify(ret))
                                if (ret.re == 2 || ret.re == '2') {

                                    if (type == 1) {
                                        // alert("加入购物车成功");
                                        api.ajax({
                                            url: window.Url.Freecart_joinCart,
                                            method: 'post',
                                            data: {
                                                values: {
                                                    goodsId: id,
                                                    token: $api.getStorage('token'),
                                                    sku_id: '',
                                                    exchange_id: $_this.commodity_exchange_id,
                                                    exchange_sku_id: $_this.commodity_exchange_skuid,
                                                    num: 1
                                                }
                                            }
                                        }, function(ret, err) {
                                            if (ret) {
                                                // console.log(JSON.stringify(ret))
                                                api.toast({
                                                    msg: ret.info,
                                                    duration: 2000,
                                                    location: 'middle'
                                                });
                                                var jsfun = 'window.location.reload();';
                                                api.execScript({
                                                    name: 'root',
                                                    frameName: 'carlist',
                                                    script: jsfun
                                                });
                                                $_this.$nextTick(function() {

                                                })
                                            } else {
                                                api.alert({
                                                    msg: JSON.stringify(err)
                                                });
                                            }
                                        })
                                    } else if (type == 2) {
                                        // api.openWin({
                                        //     name: "order",
                                        //     url: '../three_frame/order.html',
                                        //     pageParam: {
                                        //         under_type: 1,
                                        //         goodsId: id,
                                        //         num: 1,
                                        //         sku_id: '',
                                        //         exchange_id: $_this.commodity_exchange_id,
                                        //         exchange_sku_id: $_this.commodity_exchange_skuid,
                                        //         shop_id:api.pageParam.userId||""
                                        //     }
                                        // })
                                        api.openFrame({
                                            name: 'purchaseTwo',
                                            url: './purchaseTwo.html',
                                            pageParam: {
                                                id: $_this.id,
                                                data: $_this.info,
                                                goodsId: id,
                                                sku_id: '',
                                                exchange_id: $_this.manyId,
                                                exchange_sku_id: $_this.commodity_exchange_skuid,
                                                shop_id:api.pageParam.userId||""

                                            }
                                        })

                                    }

                                    // $_this.showDefault("success");
                                } else {

                                    api.openFrame({
                                        name: 'purchase',
                                        url: './purchase.html',
                                        pageParam: {
                                            type: type,
                                            id: $_this.id,
                                            data: $_this.manyId,
                                            exchangeLength: $_this.info.exchange_goods.length,

                                        }
                                    })
                                }
                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })
                    })
                },
                exchangeProduct: function(exchangeName, exchangeId) {
                    api.openWin({
                        name: 'exchange',
                        url: './commodity_exchange.html',
                        pageParam: {
                            exchangeId: exchangeId,
                            exchangeName: exchangeName
                        }
                    })
                },
                exchangeMore: function(bool) {
                    $_this = this;
                    api.openWin({
                        name: 'exchangeMoreList',
                        url: './exchange_list.html',
                        pageParam: {
                            goodsId: $_this.id,
                            data:$_this.manyId

                        }
                    })
                },
                openWindow: function(name, id) {
                    // api.openWin({
                    //     name: 'commodity',
                    //     url: './commodity.html',
                    //     pageParam: {
                    //       name: name,
                    //       id: id
                    //     }
                    // });
                },
                joinShop: function(id) {
                    $_this = this;
                    all_open_login(function() {
                        api.ajax({
                            url: window.Url.Freegoods_addShop,
                            method: 'post',
                            data: {
                                values: {
                                    goodsId: id,
                                    token: $api.getStorage('token')
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                                $_this.info.shop_status = 1
                                api.toast({
                                    msg: ret.info,
                                    duration: 2000,
                                    location: 'middle'
                                });
                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })
                    })
                },


                // 客服聊天窗口
                // 打开对应的聊天窗口
                open_chat_win: function(type) {
                    var $_this = this;
                    // alert($_this.kf_id)

                    // // 获取未读消息总数
                    // rong.getUnreadCountByConversationTypes({
                    //     conversationTypes: ['PRIVATE', 'GROUP']
                    // }, function(ret, err) {
                    //     if (ret) {
                    //         if (ret.result != 0) {
                    //             api.execScript({
                    //                 name: 'four_frame/four_index.html',
                    //                 script: 'add_tips_dot();'
                    //             });
                    //         } else {
                    //             api.execScript({
                    //                 name: 'four_frame/four_index.html',
                    //                 script: 'remove_tips_dot();'
                    //             });
                    //         }
                    //     }
                    // })
                    //
                    // // 清除当前会话的未读消息
                    // rong.clearMessagesUnreadStatus({
                    //     conversationType: 'PRIVATE',
                    //     targetId: target_id
                    // }, function(ret, err) {
                    //     // console.log(ret.status);
                    // })
                    // rong.clearMessagesUnreadStatus({
                    //     conversationType: 'GROUP',
                    //     targetId: target_id
                    // }, function(ret, err) {
                    //     // console.log(ret.status);
                    // })
                    all_open_login(function() {
                      if($_this.xd_info.shop_id==0){
                        api.openWin({
                            name: type + '_chat_header_kf',
                            url: '../four_frame/four_headers/' + type + '_chat_header.html',
                            pageParam: {
                                target_name: $_this.dp_name,
                                target_id: $_this.kf_id,
                                target_head_img: $_this.kf_img
                            }
                        });
                      }else{
                        api.openWin({
                            name: type + '_chat_header_kf',
                            url: '../four_frame/four_headers/' + type + '_chat_header.html',
                            pageParam: {
                                target_name: $_this.xd_info.username,
                                target_id:$_this.xd_info.shop_id,
                                target_head_img: $_this.xd_info.header_img
                            }
                        });
                      }
                    })
                }
            },
            mounted: function() {
                var $_this = this;

                api.hideProgress()
                var pullRefresh = new auiPullToRefresh({
                    container: document.querySelector('.aui-refresh-content'),
                    triggerDistance: 100
                }, function(ret) {
                    if (ret.status == "success") {
                        api.ajax({
                            url: window.Url.Freegoods_getGoodsDetail,
                            method: 'post',
                            data: {
                                values: {
                                    goodsId: api.pageParam.id,
                                    longitude: $api.getStorage('longitude'),
                                    latitude: $api.getStorage('latitude'),
                                    token: $api.getStorage('token')
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                                $_this.info = ret.data
                                $_this.dhList = ret.data.exchange_goods
                                console.log(JSON.stringify(ret))
                                $_this.$nextTick(function() {
                                    var bannerSwiper = new Swiper('#swiper_banner', {
                                        autoplay: 3000,
                                        loop: true,
                                        pagination: '.pagination_banner',
                                        paginationType: 'fraction',
                                    })


                                })
                                var swiper = new Swiper('.pro2_swiper', {
                                                slidesPerView: 3,
                                                spaceBetween: 10,
                                                freeMode: true,
                                                observer: true,
                                                observeParents: true
                                            })
                                setTimeout(function() {
                                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                                }, 500)
                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })

                    }
                });

                api.addEventListener({
                    name: 'exchangeFlag'
                }, function(ret, err) {
                    // $_this.data = ret.value;
                    if (ret.value) {
                        $_this.data.goodsid = ret.value.exchangeOkId;
                        $_this.data.skuid = ret.value.exchangeOkSkyId;

                        $_this.commodity_exchange_id = ret.value.exchangeOkId;
                        $_this.commodity_exchange_skuid = ret.value.exchangeOkSkyId;
                        $_this.exchangeGoods.logo_pic = ret.value.goodsExchangeInfo.logo_pic;
                        $_this.exchangeGoods.goods_name = ret.value.goodsExchangeInfo.goods_name;
                        $_this.flag1 = ret.value.flag;
                        $_this.manyId.push(JSON.parse(JSON.stringify($_this.data)))
                        $_this.manyList.push(JSON.parse(JSON.stringify($_this.exchangeGoods)))
                        console.log(JSON.stringify(ret.value))
                    }
                });

                api.addEventListener({
                    name: 'exchange_list'
                }, function(ret, err) {
                    // $_this.data = ret.value;
                    if (ret.value) {
                        $_this.data.goodsid = ret.value.exchangeListId;
                        $_this.data.skuid = ret.value.exchangeListSkuId;

                        $_this.commodity_exchange_id = ret.value.exchangeListId;
                        $_this.commodity_exchange_skuid = ret.value.exchangeList.sku_id;
                        $_this.flag1 = ret.value.flag;
                        $_this.exchangeGoods.logo_pic = ret.value.exchangeList.pic;
                        $_this.exchangeGoods.size = ret.value.exchangeList.sku_info;
                        $_this.exchangeGoods.num = ret.value.num;
                        $_this.exchangeGoods.goods_name = ret.value.exchangeNames;
                        $_this.manyId.push(JSON.parse(JSON.stringify($_this.data)))
                        $_this.manyList.push(JSON.parse(JSON.stringify($_this.exchangeGoods)))

                        console.log(JSON.stringify(ret.value))
                    }

                });
            }
        })
    }


    function setIframeHeight() {
        setTimeout(function() {
            var iframe_height = $("#cnt_iframe").contents().find("#content").height();
            $('#cnt_iframe').height(iframe_height + 20);
        }, 500);
    };
</script>

</html>
